<template>
  <div id="errorpage">
		<div class="errorpage">
			<div class="errorpage-code">
				<h1>401</h1>
			</div>
			<h2>Oops! Failed Authorization</h2>
			<p>The request has not been applied because it lacks valid authentication credentials for the target resource</p>
			<!-- <a href="/">Go To Homepage</a> -->
		</div>
	</div>
</template>
<script>
module.exports = {
  name: "Page401"
};
</script>

<style scoped>
#errorpage {
  position: relative;
  height: calc(100vh - 85px);
}

#errorpage .errorpage {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.errorpage {
  max-width: 767px;
  width: 100%;
  line-height: 1.4;
  padding: 0px 15px;
}

.errorpage .errorpage-code {
  position: relative;
  height: 150px;
  line-height: 150px;
  margin-bottom: 25px;
}

.errorpage .errorpage-code h1 {
  font-family: 'Tahoma', sans-serif;
  font-size: 186px;
  font-weight: 900;
  margin: 0px;
  color: lightgray;
}

.errorpage h2 {
  font-family: 'Tahoma', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.errorpage p {
  font-family: 'Geneva', sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0px;
  text-transform: uppercase;
}

.errorpage a {
  font-family: 'Titillium Web', sans-serif;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: none;
  background: #5c91fe;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 1px;
  margin-top: 15px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.errorpage a:hover {
  opacity: 0.8;
}
</style>
